import React,{Component} from 'react';
import CSSModules from 'react-css-modules';
import styles from './vip.scss';
import {Navgaitor,Banner} from '../../../components';
import axios from 'axios';






 class Vip extends Component {

    constructor(props) {
        super(props);
        this.state = {welfarelist: []};
      }

    
    componentDidMount(){
        var url=`http://47.92.98.104:8080/zhuiying/findAllWelfare`;
            axios({
                url:url,
                method:'get'
            }).then(res=>{
                console.log(res)
                this.setState({
                    welfarelist:res.data
                })
            }); 
    }

    showLists(){
        var jsx=[];
        if(this.state.welfarelist!=''){
       
                jsx.push(
                    <ul className="clearfix">
                    <li>
                        <a href="#">
                            <img src={this.state.welfarelist[0].pimage} styleName="big-image"/>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src={this.state.welfarelist[1].pimage} styleName="big-image"/>
                        </a>
                    </li> 
                    <li>
                        <a href="#">
                            <img src={this.state.welfarelist[2].pimage} styleName="small-image"/>
                        </a>
                    </li>        
                    <li>
                        <a href="#">
                            <img src={this.state.welfarelist[3].pimage} styleName="small-image"/>
                        </a>
                    </li>                     
                </ul>
                )
    
        }
        return jsx;
    }
    render(){
        return <div styleName="vip-home">
                <Banner/>
                <Navgaitor/>
                
                <div>
                    
                    <div  className="wrapper clearfix">
                        <div styleName="pri-left">
                            <i></i>
                            <h3>追影会员特权</h3>
                            <p>您的专属特权，查看全部</p>
                        </div>
                        <div styleName="pri-right">
                            <ul className="wrapper">
                                <li>
                                    <i styleName="p-r-bg1"></i>
                                    <h4>等级礼包</h4>
                                    <p>每月领取 优惠不断</p>
                                </li>
                                <li>
                                    <i styleName="p-r-bg2"></i>
                                    <h4>生日礼包</h4>
                                    <p>您生日 我优惠</p>
                                </li>
                                <li>
                                    <i styleName="p-r-bg3"></i>
                                    <h4>观影返币</h4>
                                    <p>追影小币大用处</p>
                                </li>
                                <li>
                                    <i styleName="p-r-bg4"></i>
                                    <h4>活动优先</h4>
                                    <p>优先参加线下活动</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div styleName="hot-activity">
                        <div styleName="c-header">
                            <i styleName="c-h-bg1"></i>
                            <h4>追影vip专享</h4>
                        </div>
                        <div styleName="h-content" className="wrapper"> 
                            {this.showLists()}
                        </div>
                        <div styleName="more" className="wrapper">
                            <div styleName="look-more">
                                <a href="#">查看更多</a>
                            </div>
                        </div>
                    </div>
                    <div styleName="change-gift">
                        <div styleName="c-header">
                            <i styleName="c-h-bg2"></i>
                            <h4>追影vip专享</h4>
                        </div>
                        <div styleName="c-content" className="wrapper">
                            <ul className="clearfix">
                                <li>
                                    <div>
                                        <a href="#">
                                            <img src="/images/vip/5.png"/>
                                        </a>
                                    </div>
                                    <h3>5天至尊VIP</h3>
                                    <p>有效期：兑换后10天有效</p>
                                    <div styleName="c-button">
                                        <a href="#">500追影币兑换</a>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <a href="#">
                                            <img src="/images/vip/2.png"/>
                                        </a>
                                    </div>
                                    <h3>15天至尊VIP</h3>
                                    <p>有效期：兑换后10天有效</p>
                                    <div styleName="c-button">
                                        <a href="#">1000追影币兑换</a>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <a href="#">
                                            <img src="/images/vip/3.png"/>
                                        </a>
                                    </div>
                                    <h3>20天至尊VIP</h3>
                                    <p>有效期：兑换后10天有效</p>
                                    <div styleName="c-button">
                                        <a href="#">1500追影币兑换</a>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <a href="#">
                                            <img src="/images/vip/4.png"/>
                                        </a>
                                    </div>
                                    <h3>30天至尊VIP</h3>
                                    <p>有效期：兑换后10天有效</p>
                                    <div styleName="c-button">
                                        <a href="#">2000追影币兑换</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div styleName="more" className="wrapper">
                            <div styleName="look-more">
                                <a href="#">查看更多</a>
                            </div>
                        </div>
                    </div>
                    <div styleName="grow-strategy">
                        <div styleName="c-header">
                            <i styleName="c-h-bg3"></i>
                            <h4>追影vip专享</h4>
                        </div>
                        <div>
                            <div styleName="pro-bar">
                                <div styleName="p-b-content">
                                    <div styleName="bar-position" className="wrapper">
                                        <div styleName="article"></div>
                                        <ul styleName=" level" className="clearfix">
                                            <li styleName="move1">
                                                <i>普通</i>
                                                <b styleName="b-move-1">0</b>
                                            </li>
                                            <li styleName="move2">
                                                <i>白银</i>
                                                <b styleName="b-move-2">500</b>
                                            </li>
                                            <li styleName="move3">
                                                <i>黄金</i>
                                                <b>1000</b>
                                            </li>
                                            <li styleName="move4">
                                                <i>铂金</i>
                                                <b>1500</b>
                                            </li>
                                            <li styleName="move5">
                                                <i>钻石</i>
                                                <b>8000</b>
                                            </li>
                                        </ul>
                                        <p><a href="#">登录</a> 查看经验值和会员等级~</p>
                                    </div>
                                </div>
                            </div>
                            <div styleName="grow-list">
                                <div styleName="grow-content" className="wrapper">
                                    <ul className="clearfix">
                                        <li>
                                            <div styleName="grow-item-t">
                                                <a href="#">
                                                    <i></i>
                                                </a>
                                                <b>+50</b>
                                            </div>
                                            <div styleName="grow-item-b">
                                                <h5><a href="#">补全个人资料</a></h5>
                                                <p>完善个人资料中的昵称、生日、性别、居住地址、并上传头像可获得50经验值</p>
                                            </div>
                                        </li>
                                        <li>
                                            <div styleName="grow-item-t">
                                                <a href="#">
                                                    <i styleName="item-bg2"></i>
                                                </a>
                                                <b>+50</b>
                                            </div>
                                            <div styleName="grow-item-b">
                                                <h5><a href="#">绑定手机号</a></h5>
                                                <p>会员账号绑定手机号，可获得50经验值</p>
                                            </div>
                                        </li>
                                        <li>
                                            <div styleName="grow-item-t">
                                                <a href="#">
                                                    <i styleName="item-bg3"></i>
                                                </a>
                                                <b>+100</b>
                                            </div>
                                            <div styleName="grow-item-b">
                                                <h5><a href="#">下载手机客户端</a></h5>
                                                <p>手机安装时光网客户端，并登录客户端将获得100经验值</p>
                                            </div>
                                        </li>
                                        <li>
                                            <div styleName="grow-item-t">
                                                <a href="#">
                                                    <i styleName="item-bg4"></i>
                                                </a>
                                                <b>+5</b>
                                            </div>
                                            <div styleName="grow-item-b">
                                                <h5><a href="#">每日签到</a></h5>
                                                <p>会员每日登录后在PC端或APP中签到可获得5经验值</p>
                                            </div>
                                        </li>
                                        <li>
                                            <div styleName="grow-item-t">
                                                <a href="#">
                                                    <i styleName="item-bg5"></i>
                                                </a>
                                            </div>
                                            <div styleName="grow-item-b">
                                                <h5><a href="#">购物／购票</a></h5>
                                                <p>购物/购票成功则可获的与实际支付金额相同的经验值</p>
                                            </div>
                                        </li>
                                        <li>
                                            <div styleName="grow-item-t">
                                                <a href="#">
                                                    <i styleName="item-bg6"></i>
                                                </a>
                                            </div>
                                            <div styleName="grow-item-b">
                                                <h5><a href="#">评价晒单</a></h5>
                                                <p>购物成功后，每次评价可获得10经验值，每次晒单可获得20经验</p>
                                            </div>
                                        </li>
                                        <li>
                                            <div styleName="grow-item-t">
                                                <a href="#">
                                                    <i></i>
                                                </a>
                                            </div>
                                            <div styleName="grow-item-b">
                                                <h5><a href="#">影评/日志奖励</a></h5>
                                                <p>影评/日志在被推荐、被回复、被收藏可获得经验值</p>
                                            </div>
                                        </li>
                                        <li>
                                            <div styleName="grow-item-t">
                                                <a href="#">
                                                    <i></i>
                                                </a>
                                            </div>
                                            <div styleName="grow-item-b">
                                                <h5><a href="#">为电影或影人上传图片</a></h5>
                                                <p>上传的电影/影人图片在被审核通过后，每张图片将会为你增加1~5的经验值</p>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div styleName="more" className="wrapper">
                                    <div styleName="look-more">
                                        <a href="#">查看更多</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    
                </div>

          
        </div>
    }
}

export default CSSModules(Vip, styles,{allowMultiple:true});